<template>
  <k-form-modal
    drawer
    width="640px"
    title="兑换码发放"
    label-width="90px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="选择讲师" prop="agent_id">
      <el-select v-model="state.model.agent_id" placeholder="不限" filterable style="width: 300px">
        <el-option
          v-for="item in props.list"
          :key="item.agent_id"
          :label="item.name"
          :value="item.agent_id"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="会员类型"
      prop="vip_level"
    >
      <el-radio-group v-model="state.model.vip_level">
        <el-radio
          v-for="item in vipLevelOptions"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="兑换时长" prop="product_id">
      <el-select v-model="state.model.product_id" placeholder="不限" style="width: 300px">
        <el-option
          v-for="item in productOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="有效期"
      prop="expire_type"
    >
      <el-radio-group v-model="state.model.expire_type">
        <el-radio
          v-for="item in expireTypeOptions"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item
      label="生成数量"
      prop="num"
    >
      <el-input-number
        v-model="state.model.num"
        placeholder="生成数量"
        clearable
        :min="1"
        :step="1"
        :precision="0"
        style="width: 300px"
      />
    </el-form-item>
    <el-form-item
      label="选择类型"
      prop="status"
    >
      <el-radio-group v-model="state.model.code_type">
        <el-radio
          v-for="item in codeTypeOptions"
          :key="item.value"
          :label="item.value"
        >{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>

  </k-form-modal>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useFormModal } from '@crud/index';
import { ElMessage } from 'element-plus';
import { lecturerGenCodeExport } from '@/api/crm-kgj/download';
defineOptions({
  name: 'KgjExchangeGrantModal'
});
interface Props {
  list?: any[]
}
const props = withDefaults(defineProps<Props>(), ({
  list: () => {
    return [];
  }
}));
const emits = defineEmits(['success']);
const codeTypeOptions = ref([
  { label: '30位长码', value: 0 },
  { label: '10位数字', value: 1 }
]);
const expireTypeOptions = ref([
  { label: '14天', value: 0 },
  { label: '7天', value: 1 },
  { label: '3天', value: 2 }
]);
const vipLevelOptions = [
  {
    label: '轻享版',
    value: 10
  },
  {
    label: '旗舰版',
    value: 20
  }
];
//
// 产品列表
const productOptions = [
  { label: '周卡', value: 'W1T1' },
  { label: '双周卡', value: 'W2T1' },
  { label: '月卡', value: 'M1T1' }
];
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    vip_level: 10,
    code_type: 0,
    expire_type: 0,
    agent_id: undefined,
    product_id: undefined,
    num: 1
  },
  rules: {
    agent_id: [{ required: true, message: '请选择讲师' }],
    product_id: [
      { required: true, message: '请选择兑换时长' }
    ],
    num: [{ required: true, message: '请填写生成数量' }]
  },
  onSubmit: async (model: any, mode = 0) => {
    if (mode === 0) {
      const res = await lecturerGenCodeExport(model);
      if (!res.err) {
        ElMessage.success('发放成功');
        emits('success');
      }
      return res;
    }

  }
});
defineExpose({
  show: methods.show
});
</script>
